<script setup lang="ts">
/**
 * @title 告警历史信息
 */

import { View } from '@element-plus/icons-vue'
import SearchForm from './components/SearchForm.vue'
import WarningDetailModal from './components/WarningDetailModal.vue'
import ListsPagination from '@/components/ListsPagination/ListsPagination.vue'
import TableLists from '@/components/TableLists/TableLists.vue'

import {
  calculateTheLastTime,
  useWarningList,
  useWorkOrder,
} from '@/mixins/Warning'

import type {
  WarningInfo,
} from '@/types'

const searchFormRef = ref<InstanceType<
  typeof SearchForm
> | null>(null)
const warningDetailModalRef
  = ref<InstanceType<typeof WarningDetailModal>>()

const { order, setOrder, getOrderInfo } = useWorkOrder()
const { loading, lists, columns, pagination, getLists, handleDownload }
  = useWarningList()
// 添加 告警结束时间
columns.splice(13, 0, {
  key: uuid(),
  label: '告警结束时间',
  prop: 'warningEndTime',
  width: 180,
})
// 修改 告警持续时间的算法
const target = columns.find(
  v => v.prop === 'warningLastTime',
)
if (target) {
  // target.hidden = true
  target.render = ({ row }) =>
    h(
      'span',
      calculateTheLastTime(
        row.warningStartTime,
        row.warningEndTime,
      ),
    )
}

// 计算告警持续时间
const computedWarningInfo = computed(() => {
  const v = order.value.warning
  return {
    ...v,
    warningLastTime: v
      ? calculateTheLastTime(
        v.warningStartTime,
        v.warningEndTime,
      )
      : undefined,
  }
})

async function queryLists() {
  const {
    state,
    type: warningType,
    code: indicatorCode,
    serieNo: workOrderNum,
    ...rest
  } = searchFormRef.value?.query || {}
  getLists((pageNumber, pageSize) => ({
    type: '2', // 查告警历史
    pageNumber,
    pageSize,
    state,
    indicatorCode,
    warningType,
    workOrderNum,
    ...rest,
  }))
}

function clickSearch() {
  pagination.pageNumber = 1
  nextTick(() => {
    queryLists()
  })
}
function clickViewRow(row: WarningInfo) {
  if (row.workOrderNum) {
    getOrderInfo(row.workOrderNum!)
  }
  else {
    // 已忽略的告警信息没有工单号
    setOrder({
      warning: { ...row },
    })
  }
  warningDetailModalRef.value?.open()
}

async function clickDownload() {
  const {
    state,
    type: warningType,
    code: indicatorCode,
    serieNo: workOrderNum,
  } = searchFormRef.value?.query || {}
  handleDownload((pageNumber, pageSize) => ({
    type: '2', // 查告警历史
    pageNumber,
    pageSize,
    state,
    indicatorCode,
    warningType,
    workOrderNum,
  }))
}

onMounted(() => {
  queryLists()
})
</script>

<template>
  <div
    class="padding-sm flex flex-col container"
  >
    <TableLists
      :loading="loading"
      :lists="lists"
      :columns="columns"
      show-overflow-tooltip
      :show-toolbox="true"
      custom-download
      @download="clickDownload"
    >
      <template #actions>
        <SearchForm
          ref="searchFormRef"
          @search="clickSearch"
        />
      </template>
      <template #operate="{ row }">
        <TdButton
          title="详情"
          type="primary"
          :icon="View"
          :disabled="false"
          @click="clickViewRow(row)"
        />
      </template>
    </TableLists>
    <ListsPagination
      v-model:page-num="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="queryLists"
      @size-change="queryLists"
    />

    <!-- 历史告警详情 -->
    <WarningDetailModal
      ref="warningDetailModalRef"
      :warning-info="(computedWarningInfo as WarningInfo)"
      :work-order-info="order.warningWorkOrder"
      :work-order-users="order.warningWorkOrderUserList"
    />
  </div>
</template>
